<template>
  <div class="demo">
    <div class="demo-title">基本使用</div>
    <div class="demo-content">
      <Form
        :model="formState"
        name="basic"
        :label-col="{ span: 8 }"
        :wrapper-col="{ span: 16 }"
        autocomplete="off"
        @finish="onFinish"
        @finish-failed="onFinishFailed"
      >
        <Form.Item
          label="Username"
          name="username"
          :rules="[{ required: true, message: 'Please input your username!' }]"
        >
          <Input v-model:value="formState.username" />
        </Form.Item>
        <Form.Item
          label="Password"
          name="password"
          :rules="[{ required: true, message: 'Please input your password!' }]"
        >
          <Input.Password v-model:value="formState.password" />
        </Form.Item>
        <Form.Item name="remember" :wrapper-col="{ offset: 8, span: 16 }">
          <Checkbox v-model:checked="formState.remember">Remember me</Checkbox>
        </Form.Item>
        <Form.Item :wrapper-col="{ offset: 8, span: 16 }">
          <Button type="primary" html-type="submit">Submit</Button>
        </Form.Item>
      </Form>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { reactive } from 'vue';
  import Button from '@sscd/button';
  import Checkbox from '@sscd/checkbox';
  import Input from '@sscd/input';
  import Form from '@sscd/form';
  interface FormState {
    username: string;
    password: string;
    remember: boolean;
  }
  const formState = reactive<FormState>({
    username: '',
    password: '',
    remember: true,
  });
  const onFinish = (values: any) => {
    console.log('Success:', values);
  };
  const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo);
  };
</script>
